<template>
  <view class="" style="padding: 20rpx">
    <view class="user_seting">
      <view
        v-for="(item, index) in setData"
        :key="index"
        @click="userSeting(item, index)"
      >
        <view class="set_box">
          <view class="setItem">
            <u--image
              :showLoading="true"
              :src="src"
              width="60rpx"
              height="60rpx"
              shape="circle"
            />
            <text>{{ item.name }}</text>
          </view>
          <text v-if="index === 0">{{ localesFrom }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      src: "https://img0.baidu.com/it/u=123020064,1503144048&fm=253",
      setData: [
        {
          name: this.$t("common.SwitchLanguages"),
        },
        {
          name: this.$t("common.SignOut"),
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["locales"]),
    localesFrom() {
      return this.locales === "zh-cn" ? "中文" : "English";
    },
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t("common.MySettings"),
    });
  },
  methods: {
    userSeting(item, index) {
      let _this = this;
      switch (index) {
        case 0:
          uni.showModal({
            title: this.$t("common.Prompt"),
            content:  this.$t("mine.SwitchLanguages"),
            success: function (res) {
              if (res.confirm) {
                if (_this.locales === "zh-cn") {
                  _this.$i18n.locale = "en";
                  _this.$store.commit("user/set_locales", "en-us");
                } else {
                  _this.$i18n.locale = "zh";
                  _this.$store.commit("user/set_locales", "zh-cn");
                }
				_this.set_out()
              }
            },
          });
          break;
        case 1:
          uni.showModal({
            title: this.$t("common.Prompt"),
            content: this.$t("mine.WhetherToLogOut"),
            cancelText: _this.$t("common.HandleCancel"),
            confirmText: _this.$t("common.HandleSure"),
            success: function (res) {
              if (res.confirm) {
                _this.set_out()
              }
            },
          });
          break;
      }
    },

    set_out() {
      this.$store.commit("user/set_out");
      uni.switchTab({
        url: "/pages/login/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.user_seting {
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  // margin-top: 100rpx;

  > view {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20rpx 0;
  }
}
.set_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setItem {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
</style>